<template>
  <div class="fgGame headerTopMain displayFlex" v-if="isShowGame">
    <div class="fgGameLeft">
      <div class="fgGameTitle clearFiex">
        <p class="floatLeft">电子游艺<span>Casino</span></p>
        <p class="floatRight">基于丰富的玩法，视觉及声光效果，为客户提供超千款机率游戏</p>
      </div>
      <div class="fgGameCon displayFlex">
        <div class="fgGameNav">
          <ul>
            <li v-for="(fgGameNavItem,fgGameNavIndex) in fgGameNavData"
                :class="{fgGameNavItem:true,on:curfgNavIndex==fgGameNavIndex}" @click="fgGameNavEvent(fgGameNavItem.type,fgGameNavIndex)">{{fgGameNavItem.name}}
            </li>
          </ul>
        </div>
        <div class="fgGamelist clearFiex">
          <div class="fgGamelistItem relative floatLeft" v-for="(fgGamelistItem,fgGameIndex) in fgGameListData"
               v-if="fgGameIndex<10" @click="startGame(fgGamelistItem.gamecode)">
            <img :src="fgGamelistItem.img" alt="">
            <p>{{fgGamelistItem.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="fgGameRight"></div>
  </div>
</template>

<script>
  import './fgGameHot.scss';
  import { mapState } from 'vuex';
  export default {
    data() {
      return {
        fgGameNavData: [
          {name: '热门', type: 'hot'},
          {name: '捕猎', type: 'fish'},
          {name: '水果机', type: 'fruit'},
          {name: '棋牌', type: 'poker'},
          {name: '老虎机', type: 'slot'},
        ],
        curfgNavIndex: 0,
        fgGameListData: [],//fg游戏列表数据
        gameS:false,
        gameStatusSubmit:{
          pages:''
        },
        isShowGame:false,
      }
    },
    computed: {
      ...mapState({
        homeData: state => state.mutations.homeStateData,
        fgGameStatus: state => state.mutations.fgGameStatus,
      })
    },
    mounted() {
    },
    activated() {
      this.initData();
    },
    deactivated() {
    },
    methods: {
      initData() {
        if(!this.homeData.fgGameList) return;
        this.fgGameListData = this.homeData.fgGameList.result || [];
        this.isShowGame = this.fgGameStatus;
      },
      //导航切换
      fgGameNavEvent(type,index){
        this.curfgNavIndex = index;
        this.getFgGameList(type);
      },
      //启动游戏
      startGame(code){
        let that = this;
        if(!that._Util.getItem("loginStatus")) {
          that._Util.showAlert("未登录");
          setTimeout(()=> {
            that.$router.push({name: 'login'});
          }, 2000);
          return;
        }
        let submit = []; // 提交数据
        that.gameStatusSubmit.pages = code;
        submit.push(that.gameStatusSubmit.pages);
        if(that.gameS) return;
        that.gameS = true;
        that._Util.DEMANDGET(that, that._Api.GET_START_GAME_PAGE, submit,'',(data)=> {
          that.gameS = false;
          window.open(data);
        }, (data)=> {
          that.gameS = false;
        });
      },
      //获取游戏列表数据
      getFgGameList(type) {
        let that = this;
        let params = {
          pageSize: 10,
          pageNum: 1,
          gameType: type
        }
        that._Util.post(that, that._Api.GET_PAGE_GAME_LIST, params, (data) => {
          that.fgGameListData = data.result || [];
        },(data) => {

        },'',true);
      },
    },
    components: {},
    watch: {
      'homeData'(){
        this.initData();
      },
      'fgGameStatus'(val){
        this.isShowGame = val;
      }
    }
  }
</script>

<style lang="css" rel="styleheet/css" scoped>

</style>
